<template>
    <div id="index">
        <div class="backgImageBox">
            <img class="backgImage" :src="bgImageUrl" />
            <img class="loginBgImg" src="@/assets/image/indexBgImage/indexBgImage_login_no.png"
                v-show="$route.path == '/login' && $store.state.token == ''" alt="">
            <img class="loginBgImg" src="@/assets/image/indexBgImage/indexBgImage_login_yes.png"
                v-show="$route.path == '/login' && $store.state.token != ''" alt="">
        </div>

        <div class="pageBox">
            <div :class="['pageItemBox', item.routeUrl == $route.path ? 'change' : '']" v-for="(item, index) in tabList"
                :key="item.id">
                <a class="pageItem" :href="item.routeUrl" target="_blank" v-if="item.external"><i></i></a>
                <router-link class="pageItem" :to="item.routeUrl" v-else>
                    <i></i>
                </router-link>
            </div>
        </div>

        <div class="contentBox">
            <header>
                <div class="logoBox">
                    <img class="logoImage" src="@/assets/image/indexImage/logo.png" />
                    <span class="title">MarsCoin</span>
                </div>

                <div class="tabBox">
                    <div :class="['tabItemBox', item.routeUrl == $route.path ? 'change' : '']"
                        v-for="(item, index) in tabList" :key="item.id">
                        <a class="tabItem" :href="item.routeUrl" target="_blank" v-if="item.external">{{ item.title
                            }}</a>
                        <router-link class="tabItem" :to="item.routeUrl" v-else>
                            {{ item.title }}
                        </router-link>
                    </div>
                </div>

                <hr />

                <button class="langButton" type="text"
                    @click="localeChange($store.state.lang == 'zh_ch' ? 'en' : 'zh_ch')">
                    <span :style="{ color: $store.state.lang != 'zh_ch' ? 'darkgray' : '' }">中</span>/<span
                        :style="{ color: $store.state.lang != 'en' ? 'darkgray' : '' }">EN</span>
                </button>
            </header>

            <div class="content">
                <router-view />
            </div>
        </div>

        <div class="nextBox" @click="nextChange">
            <p>scroll</p>
            <div class="nextIconBox">
                <i class="el-icon-d-arrow-left"></i>
            </div>
        </div>

        <footer>
            <div class="hrBox">
                <hr>
                <span>MarsCoin</span>
                <hr>
            </div>

            <div class="footerContent">
                <div class="navBox leftNavBox">
                    <a class="navItem" :target="item.isBlank ? '_blank' : ''" v-for="(item, index) in leftFooterNav"
                        :key="item.id" :href="item.routeUrl">
                        {{ item.title }}
                    </a>
                </div>

                <div class="functionBox">
                    <div class="functionItem"
                        @click="goRouter('https://api.whatsapp.com/send/?phone= 15709141446&text=Hi,openstar&type=phone_number&app_absent=0', true)">
                        <img class="image" src="@/assets/image/indexImage/news.png" />
                    </div>
                    <div class="functionItem" @click="goRouter('https://t.me/MarsCoin_CS', true)">
                        <img class="image" src="@/assets/image/indexImage/telegram.png" />
                    </div>
                </div>

                <div class="navBox rightNavBox">
                    <a class="navItem" :target="item.isBlank ? '_blank' : ''" v-for="(item, index) in rightFooterNav"
                        :key="item.id" :href="item.routeUrl">
                        {{ item.title }}
                    </a>
                </div>
            </div>

            <p class="bottonNote filingText">
                © 2013-2024 | The MarsBox Foundation & MarsBox Project. All rights reserved
            </p>
            <p class="bottonNote emailText">{{ $t('views.index.email') }}：MarsboxVIP@gmail.com</p>
        </footer>
    </div>
</template>

<script>
export default {
    name: 'index',
    data() {
        return {
            isLogin: true,
            tabList: [{
                id: 1,
                title: this.$t('views.index.home'),
                imageUrl: require('@/assets/image/indexBgImage/indexBgImage_home_one.jpg'),
                routeUrl: '/home',
                change: true,
            },
            {
                id: 2,
                title: this.$t('views.index.blurb'),
                imageUrl: require('@/assets/image/indexBgImage/indexBgImage_blurb.jpg'),
                routeUrl: '/blurb',
                change: false,
            },
            {
                id: 3,
                title: this.$t('views.index.market'),
                imageUrl: require('@/assets/image/indexBgImage/indexBgImage_join.jpg'),
                routeUrl: 'https://www.binance.com',
                change: false,
                external: true,
            },
            {
                id: 4,
                title: this.$t('views.index.join'),
                imageUrl: require('@/assets/image/indexBgImage/indexBgImage_join.jpg'),
                routeUrl: '/join',
                change: false,
            },
            {
                id: 5,
                title: this.$t('views.index.login'),
                imageUrl: require('@/assets/image/indexBgImage/indexBgImage_login.png'),
                routeUrl: '/login',
                change: false,
            },
            ],

            locale: 'zhCN',

            leftFooterNav: [
                {
                    id: 1,
                    title: this.$t('views.index.whitePaper'),
                    routeUrl: 'http://web.marsbox.site/public/whitepaper.pdf',
                    isBlank: true,
                },
                // {
                //     id: 2,
                //     title: this.$t('views.index.serviceAgreement'),
                //     routeUrl: 'https://www.baidu.com',
                //     isBlank: true,
                // },
                {
                    id: 3,
                    title: this.$t('views.index.marsAgreement'),
                    routeUrl: 'https://www.marssociety.org',
                    isBlank: true,
                },
                {
                    id: 4,
                    title: 'SpaceX',
                    routeUrl: 'https://www.spacex.com',
                    isBlank: true,
                }
            ],


            rightFooterNav: [
                {
                    id: 1,
                    title: this.$t('views.index.blurb'),
                    routeUrl: '/blurb',
                },
                {
                    id: 2,
                    title: this.$t('views.index.join'),
                    routeUrl: '/join',
                },
                {
                    id: 3,
                    title: this.$t('views.index.market'),
                    routeUrl: 'https://www.binance.com',
                    isBlank: true,
                },
                {
                    id: 4,
                    title: this.$t('views.index.login'),
                    routeUrl: '/login'
                }
            ]
        }
    },

    computed: {
        bgImageUrl() {
            switch (this.$route.path) {
                case '/home':
                    return require('@/assets/image/indexBgImage/indexBgImage_home_one.jpg')
                    break;
                case '/blurb':
                    return require('@/assets/image/indexBgImage/indexBgImage_blurb.jpg')
                    break;
                case '/market':
                    return require('@/assets/image/indexBgImage/indexBgImage_join.jpg')
                    break;
                case '/join':
                    return require('@/assets/image/indexBgImage/indexBgImage_join.jpg')
                    break;
                case '/login':
                    return require('@/assets/image/indexBgImage/indexBgImage_login.png')
                    break;

            }
        }
    },
    methods: {
        localeChange(lang) {
            this.$store.commit('setLang', { lang: lang })
            switch (lang) {
                case 'zh_ch':
                    this.$i18n.locale = 'zhCN'
                    break;
                case 'en':
                    this.$i18n.locale = 'enUS'
                    break;
            }
            this.$router.go()
        },

        nextChange() {
            let routeInfo;
            this.tabList.forEach((item, index) => {
                if (item.routeUrl == this.$route.path) {

                    routeInfo = this.tabList[index + 1 >= this.tabList.length ? 0 : index + 1].external ? this.tabList[index + 2] : this.tabList[index + 1 >= this.tabList.length ? 0 : index + 1]
                }
            })
            routeInfo.external ? window.open(routeInfo.routeUrl) : this.$router.push(routeInfo.routeUrl);

        },

        goRouter(routeUrl, external) {
            if (external) {
                window.open(routeUrl)
            } else {
                this.$router.push({ path: routeUrl })
            }

        }
    }
}
</script>

<style lang="scss">
#index {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    z-index: 2;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    font-family: SourceHanSansCN-Bold;
}

.backgImageBox {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    .backgImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .loginBgImg {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }
}

.pageBox {
    width: 30px;
    z-index: 999;
    position: absolute;
    top: 50%;
    right: 148px;

    .pageItemBox {
        .pageItem {
            padding: 15px 0;
            display: block;

            i {
                display: block;
                width: 18px;
                height: 2px;
                background: #FFFFFF;
            }
        }

        &.change {
            i {
                width: 100%;
            }
        }
    }
}

.contentBox {
    min-height: calc(100vh - 50px);
    position: relative;
    box-sizing: border-box;
    padding-bottom: 10px;
}

header {
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;

    .logoBox {
        height: 42px;
        overflow: hidden;
        margin-top: 20px;
        display: flex;
        align-items: center;

        .logoImage {
            height: 42px;
        }

        .title {
            display: block;
            margin-left: 28px;
            // font-family: Arial;
            font-weight: bold;
            font-size: 40px;
            line-height: 30px;
        }
    }

    .tabBox {
        margin-top: 32px;
        display: flex;
        height: 40px;
        overflow: hidden;

        .tabItemBox {
            overflow: hidden;
            margin: 0 70px;
            text-align: center;

            &.change {
                transform: scale(1.1);
            }
        }

        .tabItem {
            height: 100%;
            box-sizing: border-box;
            padding: 0 10px;
            // font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            line-height: 40px;
            color: #FFFFFF;
        }
    }

    hr {
        width: 1200px;
        margin-top: 14px;
        background: #FFFFFF;
        opacity: 0.3;
    }

    .langButton {
        position: absolute;
        top: 22px;
        right: 0;
        padding: 0;
        // font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 16px;
        color: #FFFFFF !important;
        line-height: 40px;
    }
}

.content {
    width: 1200px;
    z-index: 2;
    position: relative;
}

.nextBox {
    width: 50px;
    height: 40px; // position: absolute;
    // bottom: 10px;
    // left: 50%;
    // transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 2;

    p {
        // font-family: Arial;
        font-weight: bold;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 13px;
    }

    .nextIconBox {
        width: 14px;
        height: 15px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        i {
            width: 10px;
            height: 10px;
            transform: translate(-1px, 2px) rotateZ(-90deg);
        }
    }
}

footer {
    width: 100%;
    margin-top: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    padding-bottom: 50px;

    .hrBox {
        width: 100%;
        display: flex;
        align-items: center;

        hr {
            width: 100%;
            background: #FFFFFF;
            opacity: 0.3;
        }

        span {
            // font-family: Arial;
            font-weight: bold;
            font-size: 42px;
            color: #FFFFFF;
            line-height: 30px;
            margin: 0 30px;
        }
    }

    .footerContent {
        width: 965px;
        box-sizing: border-box;
        padding: 0 120px;
        margin-top: 28px;
        display: flex;
        justify-content: space-between;

        .functionBox {
            width: 274px;
            display: flex;
            justify-content: space-between;

            .functionItem {
                width: 118px;
                height: 118px;
                box-sizing: border-box;
                border: 6px solid #FFFFFF;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;

                .image {
                    height: 42px;
                }
            }
        }

        .navBox {
            // font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            line-height: 18px;
            color: #FFFFFF;

            &.rightNavBox {
                text-align: right;
            }

            .navItem {
                display: block;
                margin-bottom: 8px;
            }
        }
    }

    .bottonNote {
        // font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;

        &.filingText {
            margin-top: 76px;
        }

        &.emailText {
            margin-top: 6px;
        }
    }
}
</style>